<%@ page language="java" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>后台管理</title>
		<link rel="stylesheet" href="${ctx}/statics/css/reset.css" type="text/css" media="screen" />
		<link rel="stylesheet" href="${ctx}/statics/css/style.css" type="text/css" media="screen" />
		<script type="text/javascript" src="${ctx}/statics/scripts/jquery-1.8.2.min.js"></script>
		
		<script type="text/javascript" src="${ctx}/statics/scripts/jquery.cookie.js"></script>
		<script type="text/javascript" src="${ctx}/statics/scripts/jquery.hotkeys.js"></script>
		<script type="text/javascript" src="${ctx}/statics/scripts/jquery.jstree.js"></script>
		<script>
		
		</script>
	</head>
  
	<body class="body-top"><div id="body-wrapper"> <!-- Wrapper for the radial gradient background -->
		<div id="main-content">
			<div class="content-box"><!-- Start Content Box -->
				
				<div class="content-box-header">
					<h3>后台角色（用户组）</h3>
					<ul class="content-box-tabs">
						<li><a href="#tab1" class="default-tab">列表</a></li> <!-- href must be unique and match the id of target div -->
					</ul>
					<div class="clear"></div>
				</div> <!-- End .content-box-header -->
				
				<div class="content-box-content">
					<div class="tab-content default-tab" id="tab1"> <!-- This is the target div. id must match the href of this div's tab -->
						<table>
							<thead>
								<tr>
								   <th>角色名称</th>
								   <th>分配资源</th>
								</tr>
							</thead>
							<tbody>
								<c:forEach items="${roles}" var="role">
								<tr>
									<td><a href="#" title="${role.name}">${role.name}</a></td>
									<td>
										 <a href="${ctx}/sysrole?method=list&sysRoleId=${role.id}" title="分配资源"><img src="${ctx}/statics/images/icons/hammer_screwdriver.png" alt="Edit Meta" /></a>
									</td>
								</tr>
								</c:forEach>
							</tbody>
							<tfoot>
								<tr>
									<td colspan="6">
										<div class="clear"></div>
									</td>
								</tr>
							</tfoot>
						</table>
					</div> <!-- End #tab1 -->
				</div> <!-- End .content-box-content -->
			</div> <!-- End .content-box -->
			<div class="clear"></div>
		</div> <!-- End #main-content -->
	</div>
	<c:if test="${sysRoleId !=null && sysRoleId>0}">
	<form method="post" name="form1" id="form1" action="sysrole?method=updatePermission">
	<div id="menuTree">
	<%--
		<ul>
			<li id="phtml_1">
				<a href="#">Root node 1</a>
				<ul>
					<li id="phtml_2">
						<a href="#">Child node 1</a>
					</li>
					<li id="phtml_3">
						<a href="#">A Child node 2</a>
					</li>
					<li id="phtml_33">
						<a href="#">A Child node 33</a>
					</li>
				</ul>
			</li>
			<li id="phtml_4">
				<a href="#">Root node 2</a>
			</li>
		</ul>
	</div>
	--%>
		<ul>
		<c:forEach items="${menus}" var="menu" varStatus="i">
			
			<c:if test="${menu.parentId==0 && menu.type!=0}">
			<li id="${menu.id}" <c:forEach items="${roleMenus}" var="roleMenus" varStatus="i"><c:if test="${roleMenus.sysMenuId==menu.id}">class="jstree-undetermined"</c:if></c:forEach>>
				<a href="#">${menu.name} ${menu.id}</a>
				<ul>
			</c:if>
			<c:forEach items="${menus}" var="menu2" varStatus="i">
				<c:if test="${menu2.parentId==menu.id && menu2.type!=0}">
					<li id="${menu2.id}" <c:forEach items="${roleMenus}" var="roleMenus" varStatus="i"><c:if test="${roleMenus.sysMenuId==menu2.id}">class="jstree-checked"</c:if></c:forEach>>
						<a href="#">${menu2.name} ${menu2.id}</a>
					</li>
				</c:if>
			</c:forEach>
			<c:if test="${menu.parentId==0 && menu.type!=0}">
				</ul>
			</li>
			</c:if>
		</c:forEach>
		</ul>
	</div>
	<script type="text/javascript" class="source">
	$(function () {
		/*树*/
		$("#menuTree").jstree({
			"plugins" : [ "themes", "html_data", "checkbox", "ui" ]
		}).bind("loaded.jstree", function (event, data) {//绑定后使用，节点全部打开状态
            $(this).jstree("open_all");
        });
		/* 按钮 */
		
		$("#btnSub").click(function() {
			var checked_ids = [];
			$("#menuTree .jstree-undetermined").each(function(){
                var node = $(this);
                checked_ids.push(node.attr("id"));
            });
            $("#menuTree .jstree-checked").each(function(){
               var node = $(this);
               checked_ids.push(node.attr("id"));
            });
            $("#checkedMenuIds").val(checked_ids);
            //alert($("#checkedMenuIds").val());
        });
	});
	
	</script>
	
	<div class="clear"></div>
	<br/>
	<input type="hidden" name="checkedMenuIds" id="checkedMenuIds" />
	<input type="hidden" name="sysRoleId" id="checkedMenuIds" value="${sysRoleId}" />
	<p>
	<input class="button" type="submit" id="btnSub" value="提交保存" />
	</p>
	</form>
	</c:if>
</body>
</html>
